<template>
  <div>
    <div>
      <Input placeholder="姓名或账户" on-enter="handleFilter" v-model="listQuery.name"><Button slot="append" icon="ios-search" type="primary" @click="handleFilter">搜索</Button></Input>
      <Button icon="ios-add" type="primary" @click="onSubmit">添加</Button>
    </div>
    <Tables ref="userTable" searchable search-place="top" :columns="columns" v-model="list" @on-select="handleSelectionChange">
    </Tables>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: left;">
        <Page v-show="!listLoading" :total="total" :page-size-opts="[50,100,500,1000,2000]" :current="listQuery.page" show-total show-sizer :page-size="listQuery.limit" @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"></Page>
      </div>
    </div>
  </div>
</template>
<script>
import {
  page
} from '@/api/admin/user/index'
import Tables from '_c/tables'
export default {
  components: {
    Tables
  },
  name: 'userSelect',
  data () {
    return {
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '姓名', key: 'name' },
        { title: '账户', key: 'username' },
        { title: '性别', key: 'sex' },
        { title: '描述', key: 'description' }
      ],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined
      },
      tableKey: 0,
      selects: []
    }
  },
  created () {
    this.selects = []
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          for (let i = 0; i < this.selects.length; i++) {
            for (let j = 0; j < response.data.rows.length; j++) {
              if (response.data.rows[j].id === this.selects[i].id) {
                response.data.rows.splice(j, 1)
              }
            }
          }
          const rows = this.selects.concat(response.data.rows)
          this.list = rows
          this.total = response.data.total
          this.listLoading = false
          page(this.listQuery)
            .then(() => {
              for (let i = 0; i < this.selects.length; i++) {
                this.$refs.userTable.toggleRowSelection(this.selects[i])
              }
            })
        })
    },
    handleFilter () {
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    onSubmit () {
      this.$emit('closeUserDialog', this.selects)
    },
    clear () {
      this.selects = []
      this.getList()
    },
    handleSelectionChange (val, row) {
      let flag = true
      let repeat = false
      for (let i = 0; i < val.length; i++) {
        if (val[i].id === row.id) {
          for (let j = 0; j < this.selects.length; j++) {
            if (this.selects[j].id === row.id) {
              repeat = true
            }
          }
          if (!repeat) {
            this.selects.push(row)
            flag = false
          }
          break
        }
      }
      if (flag) {
        const index = this.list.indexOf(row)
        this.selects.splice(index, 1)
      }
    }
  }
}
</script>
